<template>
  <div class="z-allocate h-full absolute "
       :style="{right:right}">
    <div class="
        z-allocate--stretch
        absolute
        flex
        items-center
        justify-center
        cursor-pointer
      "
         @click.stop="handleStretch">
      <svg data-v-4e10e1be=""
           viewBox="64 64 896 896"
           focusable="false"
           data-icon="double-right"
           width="1em"
           height="1em"
           fill="currentColor"
           aria-hidden="true">
        <path data-v-4e10e1be=""
              d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path>
      </svg>
    </div>

    <div class="z-allocate__wrapper h-full relative">
      <el-tabs v-model="tab"
               class="h-full flex flex-col"
               v-if="hasSource">
        <el-tab-pane label="Props"
                     name="props"
                     lazy>
          <el-form label-position="top">
            <el-row :gutter="12">
              <el-col :span="24"
                      v-if="setting.columns">
                <el-form-item label="Field">
                  <el-select style="width:100%"
                             :value="setting.source.props['field']"
                             @input="(val) => handleInput(val, 'field')">
                    <el-option v-for="(item,index) in setting.columns"
                               :key="index"
                               :label="item.name"
                               :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-for="key in componentKeys"
                      :key="key"
                      v-show="components[key].hidden !== true"
                      v-bind="components[key].col">
                <el-form-item v-bind="components[key].formItem">
                  <component v-bind="components[key].component"
                             :is="components[key].is"
                             :value="setting.source.props[key]"
                             @input="(val) => handleInput(val, key)">
                    <template v-if="components[key].is === 'ElSelect' && components[key].component.options &&  components[key].component.options.length">
                      <el-option v-for="item in components[key].component.options"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value"></el-option>
                    </template>
                  </component>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="Event"
                     name="event"
                     lazy>
          <el-form label-width="100px"
                   label-position="left">
            <el-form-item label="UUID">
              <ZTooltip :line="1"
                        :content="setting.source.events.uuid">
                <span>{{ setting.source.events.uuid }}</span>
              </ZTooltip>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Emitter from '@/mixins/emitter'
import ZTooltip from '@/components/storybook/z-tooltip'
import ZClipUpload from '@/components/storybook/z-clip-upload'
import { isEmpty, get } from 'lodash'

export default {
  name: 'ZAllocate',
  mixins: [Emitter],
  components: {
    ZTooltip,
    ZClipUpload
  },
  props: {
    isStreth: Boolean,
    setting: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      tab: 'props'
    }
  },
  computed: {

    right () {
      return this.isStreth ? `-350px` : 0
    },
    components () {
      return get(this.setting, 'source.components', {})
    },
    componentKeys () {
      return get(this.setting, 'source.componentKeys', [])
    },
    hasSource () {
      return !isEmpty(get(this.setting, 'source', {}))
    }
  },

  methods: {
    handleStretch () {
      this.dispatch('JuggleGadget', 'event:streth', !this.isStreth)
    },
    handleInput (val, key) {
      this.$set(this.setting.source.props, key, val)
    }
  }
}
</script>
<style lang="scss" scoped>
.z-allocate {
  z-index: 999999;
  top: 0;
  bottom: 0;
  width: 350px;
  background-color: #ffffff;
  transition: all 0.5s ease-in-out 0s;
  box-shadow: -2px 0 4px 0 rgba(0, 0, 0, 0.1);
  padding: 16px 0 0;
  &--stretch {
    top: calc(50% - 40px);
    left: -20px;
    width: 20px;
    height: 80px;
    background-color: #ffffff;
    box-shadow: -2px 0 4px 0 rgba(0, 0, 0, 0.1);
  }
  &__wrapper {
    .el-tabs {
      ::v-deep .el-tabs__header {
        .el-tabs__nav-wrap {
          padding: 0 16px;
        }
      }
      ::v-deep .el-tabs__content {
        padding: 0 16px;
        flex: 1;
        overflow: auto;
      }
    }
  }
  .el-form-item {
    ::v-deep .el-form-item__label {
      line-height: 14px;
      height: 24px;
      white-space: nowrap;
    }
    ::v-deep .el-form-item__content {
      display: flex;
      align-items: center;
      line-height: inherit;
    }
    .el-input-number {
      &.is-controls-right {
        &:hover {
          ::v-deep .el-input-number__increase {
            opacity: 1;
          }
          ::v-deep .el-input-number__decrease {
            opacity: 1;
          }
        }
        ::v-deep .el-input__inner {
          padding-left: 10px;
          padding-right: 28px;
        }
        ::v-deep .el-input-number__increase {
          width: 15px;
          opacity: 0;
          transition: all 200ms;
        }
        ::v-deep .el-input-number__decrease {
          width: 15px;
          opacity: 0;
          transition: all 200ms;
        }
      }
    }
    .el-color-picker {
      display: inherit;
    }
  }
}
</style>
